<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mail Chimp Designs</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
	$(".nm_mc_box .field").focus( function() {
		$(this).addClass("selected");
	});
	$(".nm_mc_box .field").focusout( function() {
		$(this).removeClass("selected");
	});
	
	$(".nm_mc_box .field").hover( function () {
		$(".nm_mc_box .tooltip").fadeIn();
	},
	function () {
		$(".nm_mc_box .tooltip").fadeOut();
	});
});
</script>
</head>

<style type="text/css">
input:focus {
	outline: none;
}

.temp_container
{
	width:250px;
}

.nm_mc_box {
	height:auto;
	margin: auto;
	background: url(2.jpg);
	/*background-size: 100%;
	position: relative;*/
}

/*.nm_mc_box h6 {
	font-family: "Trebuchet MS";
	color: #fff;
	font-size: 18px;
	position: absolute;
	margin: 0;
	top: 9px;
	left: 9px;
}*/

.nm_mc_box #cap {
	font-family: "Trebuchet MS";
	color: #fff;
	font-size: 18px;
	
	/*margin: 0;
	top: 9px;
	left: 9px;position: absolute;*/
}

.nm_mc_box p {
	position: absolute;
	margin: 0;
	bottom: 9px;
	right: 9px;
	font-family: "Trebuchet MS";
	color: #fff;
	font-size: 13px;
	font-style: italic;
}

/*.nm_mc_box input.field {
	height: 20px;
	width: 70%;
	position: absolute;
	top: 50px;
	left: 12px;
	box-shadow: 0px 0px 3px #fff;
	border: 1px solid #ccc;
	color: #666;
	font-style: italic;
	letter-spacing: 1px;
	background: url(field-bg.png) repeat-x;
}*/

.nm_mc_box input#email {
	height: 20px;
	width: 70%;
	/*position: absolute;
	top: 50px;
	left: 12px;*/
	box-shadow: 0px 0px 3px #fff;
	border: 1px solid #ccc;
	color: #666;
	font-style: italic;
	letter-spacing: 1px;
	background: url(field-bg.png) repeat-x;
}

.nm_mc_box input#fullname {
	height: 20px;
	width: 70%;
	/*position: absolute;
	top: 75px;
	left: 12px;*/
	box-shadow: 0px 0px 3px #fff;
	border: 1px solid #ccc;
	color: #666;
	font-style: italic;
	letter-spacing: 1px;
	background: url(field-bg.png) repeat-x;
}

.nm_mc_box .button {
	border: #CCC 2px solid;
	position: absolute;
	left: 12px;
	top: 105px;
	cursor: pointer;
	background-color:#093;
	color:#fff;
}


.nm_mc_box .button:hover {
	 box-shadow: 0px 0px 6px #fff;
}

.nm_mc_box .tooltip {
	width: auto;
	padding: 8px;
	background-color: #5f5f5f;
	border: 2px solid #363636;
	border-radius: 5px;
	font-family: "Trebuchet MS";
	color: #fff;
	font-size: 13px;
	position: absolute;
	top: 5px;
	left: 0px;
	opacity: 0.9;
	font-weight: bold;
	display: none;
}

.nm_mc_box .selected {
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid #ccc;
	box-shadow: 0px 0px 7px #fff !important;
}

.nm_clear
{
	clear:both;
}
</style>

<body>
<div class="temp_container">
<div class="nm_mc_box">
	<p id="cap">You Caption Here</p>
    <input type"text" id="fullname" placeholder="Fullname" / ><br />
	<input type"text" id="email" placeholder="Email" / >
	<input type="submit" class="button" value="Subscribe" / >
    <div class="nm_clear"></div>
	<!--<p>Powered By: Nmedia</p>-->
    <!--<span class="tooltip">Here is the tooltip</span>-->
   
</div>
</div>
</body>
</html>
